<template>
  <!-- 文章内容 -->
  <div class="preview" v-html="content" @click.stop.prevent="contentClick($event)"></div>
</template>

<script>
  export default {
    props: {
      content: {
        default: '',
      },
    },
    data() {
      return {};
    },
    components: {},
    created() {},
    watch: {},
    created() {},
    computed: {},
    mounted() {},
    methods: {
      contentClick(event) {
        const { target } = event;
        switch (target.className) {
          case 'content-photo':
            break;
        }
      },

      contentImageHandler() {
        // 所有图片
        console.log(this.info.content);
        const images = this.info.content.match(/\/\/.*?"/g);
        this.contentImageList = images.map((image) => 'http:' + image.substr(0, image.length - 1));

        // 事件
      },
    },
  };
</script>

<style lang="less">
  .preview {
    width: 100%;
    font-size: 1.4rem;
    line-height: 2.5rem;
    padding-bottom: 1.4rem;
    color: var(--textBrightColor);
    img {
      width: 100% !important;
      // border-radius: 1rem !important;
      overflow: hidden !important;
    }
    p {
      margin: 2.5rem 0;
      font-size: 3rem;
      font-weight: 400;
      color: var(--textBrightColor);
      line-height: 4.8rem;
    }

    blockquote {
      margin: 2rem 0;
      padding-left: 2.3rem;
      position: relative;
      line-height: 1.8;

      &:before {
        content: '“';
        font-size: 5rem;
        position: absolute;
        left: 0;
        top: -1rem;
        width: 2rem;
        height: 2rem;
        line-height: 1;
        color: #bbb;
      }
    }
  }
</style>
